<template>
  <li class="list-item1 clearfix">
    <el-checkbox v-model="checkAll" @change="CheckAllChange" class="checkall">{{list.groupName}}</el-checkbox>
    <SortableList v-model="list.excelColumn" :lockToContainerEdges="true" :distance="disnum" lockOffset="0%" lockAxis="xy" axis="xy" class="shortList">
      <!-- <el-checkbox-group v-model="selectItem" @change="handleSelectItemChange"> -->
        <SortableItem v-for="(item, index) in list.excelColumn" :key="item.fieldName" collection="lists" :index="index"  :item="item"/>
      <!-- </el-checkbox-group> -->
    </SortableList>
  </li>
</template>

<script>
import {ContainerMixin, ElementMixin} from 'vue-slicksort';
const SortableList = {
  mixins: [ContainerMixin],
  template: `
    <ul class="list">
      <slot />
    </ul>
  `,
};

const SortableItem = {
  mixins: [ElementMixin],
  props: ['item'],
  template: `
    <li class="list-item">
      <el-checkbox :label="item.columnName" :key="item.fieldName" v-model='item.isDefault' class='itemlabel'>{{item.columnName}}</el-checkbox>
    </li>
  `,
  data(){
    return{
      checked:false
    }
  },
  methods:{
  }
};
export default {
  mixins: [ElementMixin],
  props: ['list'],
  components: {
    SortableItem,
    SortableList,
  },
  data() {
    return {
        disnum:10,
        // selectItem:[],
        // isIndeterminate:true,
        checkAll:false,
        items: this.list.excelColumn.slice(0),
        checkarr:[]
    };
  },
  mounted(){
  },
  watch:{
    list:{
      handler:function(val){
        // console.log(val);
        // console.log(val.items);
        let arr = val.excelColumn;
        this.checkarr = [];
        arr.forEach(i => {
          if(i.isDefault){
            this.checkarr.push(i);
          }
        })
        let obj = {
            groupName:this.list.groupName,
            excelColumn:val.excelColumn
            // excelColumn:this.checkarr     //提交选中的
        }
        this.$emit('selects',obj);
        // console.log(this.checkarr);
      },
      deep:true
    }
  },
  methods:{
      //  handleSelectItemChange(value) {
      //   let checkedCount = value.length;
      //   this.checkAll = checkedCount === this.list.items.length;
      //   let obj = {
      //       id:this.list.id,
      //       name:this.list.value,
      //       children:value
      //   }
      //   this.$emit('selects',obj);
      //   // this.isIndeterminate = checkedCount > 0 && checkedCount < this.list.items.length;
      // },
      // handleCheckAllChange(val) {
      //   //   需要是字符串实现全选，对象没有办法匹配实现全选
      //   // this.selectItem = val ? this.list.items : [];
      //   if(val){
      //       for(let i=0;i<this.list.items.length;i++){
      //       this.selectItem.push(this.list.items[i].id);
      //       }
      //       let obj = {
      //           id:this.list.id,
      //           name:this.list.value,
      //           children:this.selectItem
      //       }
      //       this.$emit('selects',obj);
      //   }else{
      //       this.selectItem = [];
      //   }
        
      //   // this.isIndeterminate = false;
      // },
      CheckAllChange(val){
        if(val){
          this.list.excelColumn.forEach(i => {
            i.isDefault = true;
          })
        }else{
           this.list.excelColumn.forEach(i => {
            i.isDefault = false;
          })
        }
      }
  }
}
</script>
<style>
.list-item1{
    display: inline-block;
    padding:20px;
    z-index: 2900;
    /* border-left: 1px solid #efefef; */
    /* border-top: 1px solid #efefef; */
    /* border-right: 1px solid #efefef; */
    border-bottom: 1px solid #e6e3e3;
    height: 100%;
    width: 100%;
    background-color:#fff;
    position: relative;
}
.list-item1:last-child{
    /* border-bottom: 1px solid #efefef; */
    border-bottom: 0;
}
ul{
    padding:0;
}
.checkall{
    float:left;
    text-align: center;
    position:absolute;
    top:50%;
    width:100px;
    margin-top:-10px;
    margin-right: 0;
}
.shortList{
    float:left;
    width: 603px;
    /* width: 90%; */
    margin-left:110px;
}
.list-item{
    z-index: 2900;
    background-color:#fff;
    list-style: none;
    /* padding:10px; */
    width:200px;
    display: inline-block;
    margin:0 1px 1px 0;
    border:1px solid #efefef;
}
.itemlabel{
  padding:10px;
  width:100%;
  margin-right: 0;
}
</style>